<!-- 右侧拖拽配置 -->
<template>
  <div class="dragger-right">
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane label="组件设置" name="first"> 组件设置</el-tab-pane>
      <el-tab-pane label="表单设置" name="second"> 表单设置</el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import type { TabsPaneContext } from "element-plus";

const activeName = ref("first");

const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event);
};
</script>

<style lang="scss" scoped>
.dragger-right {
  height: 100%;
  width: 24%;
  padding: 16px 6px;
  ::v-deep {
    .el-tabs__nav {
      padding: 0 6px;
    }
  }
}
</style>
